(function (Vue) {
	// 函数内部变量不污染全局
	// const todo_data = [{
	// 		id: 1,
	// 		title: '吃饭',
	// 		stat: true
	// 	},
	// 	{
	// 		id: 2,
	// 		title: '睡觉',
	// 		stat: true
	// 	},
	// 	{
	// 		id: 3,
	// 		title: '打豆豆',
	// 		stat: false
	// 	},
	// 	{
	// 		id: 4,
	// 		title: '吃饭',
	// 		stat: true
	// 	}
	// ]
	var app = new Vue({
		el: '#todoapp',
		data: {
			todo_data:[],
			// 存放用户输入数据
			inp_data: '',
			url:"http://localhost:3000/tododata"
		},
		mounted() {
			axios.get(this.url).then((data)=>{
				this.todo_data=data.data
			})
		},
		methods: {
			addTodo(ev) { //添加任务
				// alert(111)
				// 1,获取文本框的内容
				// 2，因为vue有数据绑定(单项绑定) 所以我们直接将数据添加到todo_data
				// js框架从大量操作dom的时候解放。前端人员现在只关心数据
				// 3，清空文本框

				if (this.inp_data == '') {
					return;
				}
				let data_form = {
					// id: this.todo_data.length + 1,
					title: this.inp_data,
					stat: false
				}
				// 现将组装好的数据添加到服务器,然后在添加到数组中
				axios.post(this.url,data_form).then((backdata)=>{
	                // 使用对象的结构赋值获取属性
					var {status,data}=backdata;
					// 使用状态码判断写入是否成功
					if(status==201){
						// 写入成功修改页面及Vue实例数据的内容
						this.todo_data.push(data)
					}
				})
				

				this.inp_data = ''
			},
			// 全选与全不选
			toggleAll(ev) {
				for (let i = 0; i < this.todo_data.length; i++) {
					this.todo_data[i].stat = ev.target.checked;
				}
			},
			// 删除任务
			removeTodo(k) {
				// splice(下标，个数)
				// this.todo_data.splice(k, 1)
				axios.delete(this.url+"/"+this.todo_data[k].id).then((backdata)=>{
					if(backdata.status==200){
						this.todo_data.splice(k,1)
					}
				})
			},
			removeCompleted() {
				// 1方案
				// for(let i=0;i<this.todo_data.length;i++){
				// 	if(this.todo_data[i].stat==true){
				// 		this.todo_data.splice(i,1)
				// 	}
				// }
				// 2.方案 
				// filter这个方法对数组进行遍历操作 留未完成的
				// this.todo_data=this.todo_data.filter((v)=>{
				// 	if(v.stat==false){
				// 		return true;
				// 	}
				// })
				this.todo_data = this.todo_data.filter(v => !v.stat)
			},

		},
		todoDone(v){
			axios.put(this.url+'/'+v.id,{stat:!v.stat,title:v.title}).then((backdata)=>{
				console.log(backdata);
			})
		},
		computed: {
			getNu() {
				return (this.todo_data.filter((v) => !v.stat)).length
			}
		}
	});
})(Vue)
